<template>
  <div class="rpanel">
    <el-button class="backBtn" @click="backTop">返回</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="600"
      @row-click="clickRow"
    >
      <vueSeamlessScroll
        v-if="tableData.length > 0"
        :list="tableData"
        class="seamless-warp"
      >
        <el-table-column prop="name" label="区域" width="180">
        </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
      </vueSeamlessScroll>
    </el-table>
  </div>
</template>
<script>
//导入全局配置
import { EVENT_TYPES } from "../../global";
//导入滚动组件
import vueSeamlessScroll from "vue-seamless-scroll";

//导入数据源
import shanghai from "/src/utils/data/shanghai";
export default {
  inject: ["mapInstace"],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      //滚动列表参数配置
      classOption: {
        // step: 1, // 数值越大速度滚动越快
        // limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      tableData: [],
    };
  },
  mounted() {
    console.log(this.mapInstace());
    // console.log(shanghai.features);
    this.initAreaList(shanghai.features);
  },
  methods: {
    //button-点击事件
    backTop() {
      this.$emit("updateUI", EVENT_TYPES.UPDATE_MAP_VECTORLAYER, {
        code: "310000",
      });
    },
    //table-row点击事件
    clickRow(row, column, event) {
      let code = row.code;
      //发送消息给父组件-更新地图
      this.$emit("updateUI", EVENT_TYPES.UPDATE_MAP_VECTORLAYER, {
        code: code,
      });
    },
    initAreaList(_features) {
      let _that = this;
      _features.some(function (value, index, array) {
        _that.tableData.push({
          name: value["properties"]["name"],
          code: value["properties"]["adcode"],
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.rpanel {
  position: absolute;
  left: 15px;
  top: 80px;
  width: 350px;
  height: 650px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  z-index: 2;
}
.backBtn {
  float: right;
}
// vue滚动插件
/deep/ .seamless-warp {
  height: 565px;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}

// 修改button样式
/deep/ .el-button {
  background-color: #1356a1;
  color: #fff;
}

/*修改table 表体的背景颜色和文字颜色*/
/deep/ .el-table {
  background-color: transparent;

  th,
  td {
    background-color: transparent;
  }
  .el-table__expanded-cell {
    background-color: transparent !important;
  }

  // 表头背景色
  th.el-table__cell {
    background-color: rgb(25, 50, 70);
    color: #fff;
  }
  tr > td {
    background-color: rgb(25, 50, 70);
    color: #fff;
  }

  // hover效果
  tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  tbody tr:hover > td {
    background-color: #1356a1 !important;
    // text-align: center;
  }

  // 滚动条宽高
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
    /*滚动条宽度*/
    height: 10px;
    /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px #216fe6 inset;
    /*滚动条的背景区域的内阴影*/
    border-radius: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #216fe6 inset;
    border-radius: 6px;
    background-color: #216fe6;
  }
}
</style>
